<template>
  <div class="leftpie-box">
    <div class="leftpie-box-content">
      <div class="leftpie-box-content-total">
        <div class="pie">
          <v-chart class="single-bar" :options="option" :auto-resize="true" />
        </div>
        <div class="atotalof">
          <div>总数</div>
          <div>
            {{totalVal}}
            <span>个</span>
          </div>
        </div>
        <div class="line"></div>
      </div>
      <div class="leftpie-box-content-pie" v-for="(item,index) of pieList" :key="index">
        <div class="name centerbox">{{item.name}}</div>
        <div class="statistical">
          <div>
            <span>数量：</span>
            <span>{{item.number}}</span>
          </div>
          <div>
            <span>在线：</span>
            <span>{{item.onlineNumber}}</span>
          </div>
          <div>
            <span>在线率：</span>
            <span>{{item.percent}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import { JointInspectionModule } from "@/store/modules/JointInspection";
@Component
export default class LeftPie extends Vue {
  @Prop() formData!: any;
  pieList: Array<object> = [
    // {
    //   name: "长园共创",
    //   number: 100,
    //   value: "20%",
    // },
  ];
  option = {
    tooltip: {
      show: false,
    },
    grid: {
      top: "1%",
      bottom: "0%",
      left: "9%",
    },
    xAxis: {
      data: [""],
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        type: "bar",
        barWidth: "22",
        z: 1,
        itemStyle: {
          normal: {
            color: "#14417B",
          },
        },
        data: [1000],
      },
      {
        name: "正常",
        type: "pictorialBar",
        symbol: "round",
        symbolRepeat: true,
        symbolSize: [22, 5],
        symbolMargin: 1,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#049DE5", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0A58BF", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        label: {
          show: false,
        },
        data: [50],
      },
    ],
  };
  totalVal: any = 0;
  @Watch("totalVal", { immediate: false, deep: true })
  getBarData() {
    this.option.series[1].data = [this.totalVal];
    this.option.series[0].data = [this.totalVal + 200];
  }
  mounted(): void {
    // this.getTotalNumber();
    this.getKeyCount();
    this.getFirmFiveDenfenseKeyCount();
  }
  // getTotalNumber() {
  //   let list: Array<number> = [];
  //   this.pieList.forEach((res: any) => {
  //     list.push(res.number);
  //   });
  //   list.reduce((prev, curr) => {
  //     let total = prev + curr;
  //     this.totalVal = total;
  //     return this.totalVal;
  //   });
  // }
  // 总数
  getKeyCount() {
    var params = {
      keyFirm: this.formData.keyFirm,
      localCity: "",
      voltageLevel: this.formData.voltageLevel,
    };
    (this as any).$services
      .getKeyCount({ data: params })
      .then((result: any) => {
        if (result.data) {
          this.totalVal = result.data.keyCount || 0;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }

  // 各厂家
  getFirmFiveDenfenseKeyCount() {
    var localCity = "";
    if (this.CompanyList && this.CompanyList[0] && this.CompanyList[0].code) {
      localCity = this.CompanyList[0].code;
    } else {
      localCity = "8a1ea5c64bdebad1014bdebc6047087b";
    }
    var params = {
      keyFirm: this.formData.keyFirm,
      localCity: localCity,
      voltageLevel: this.formData.voltageLevel,
    };
    // console.log(1111111111111,params);

    (this as any).$services
      .getFirmFiveDenfenseKeyCount({ data: params })
      .then((result: any) => {
        if (result.data) {
          var data = [];
          result.data.map((k) => {
            k["percent"] =
              Number(Number(k.keyOnlineCount) / Number(k.firmKeyCount)) * 100 +
              "%";
            data.push({
              name: k.keyFirm || "未知",
              number: k.firmKeyCount || 0,
              onlineNumber: k.keyOnlineCount || 0,
              percent: k.percent || "0",
            });
          });
          // console.log("data:", data);

          this.pieList = data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.leftpie-box {
  width: 100%;
  height: 100%;
  &-content {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem 0.1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: auto;
    &-pie {
      width: 2.72rem;
      height: 1.27rem;
      background: url("../../../../../assets/img/Locks/pie-bg.png") no-repeat;
      background-size: 100% 100%;
      // margin-left: 0.15rem;
      box-sizing: border-box;
      margin: 0.1rem;
      position: relative;
      .name {
        width: 0.4rem;
        position: absolute;
        top: 0.4rem;
        left: 0.43rem;
        font-size: 0.2rem;
      }
      .statistical {
        position: absolute;
        top: 0.35rem;
        left: 1.4rem;
        font-size: 0.15rem;
        > div {
          padding-bottom: 0.12rem;
          > :nth-child(2) {
            color: #36cbff;
          }
        }
      }
    }
    > :nth-child(2) {
      margin-left: 0.2rem;
    }
    &-total {
      width: 2.8rem;
      height: 1.27rem;
      display: flex;
      .pie {
        width: 0.24rem;
        height: 1.33rem;
        margin-left: 0.65rem;
        .single-bar {
          width: 100%;
          height: 100%;
        }
      }
      .atotalof {
        width: 2rem;
        height: 1.33rem;
        padding-left: 0.36rem;
        box-sizing: border-box;
        > :nth-child(1) {
          font-size: 0.32rem;
          color: #36cbff;
          padding-top: 0.2rem;
          box-sizing: border-box;
        }
        > :nth-child(2) {
          font-size: 0.44rem;
          padding-top: 0.2rem;
          box-sizing: border-box;
          > span {
            font-size: 0.24rem;
          }
        }
      }
      .line {
        width: 0.05rem;
        height: 1.14rem;
        background: linear-gradient(
          180deg,
          rgba(2, 76, 113, 0) 0%,
          rgba(4, 143, 213, 1) 52%,
          rgba(2, 76, 113, 0) 100%
        );
      }
    }
  }
}
</style>